<script setup>

const model = defineModel()
defineProps(['placeholder'])
</script>

<template>
  <div class="inputBox">
    <div class="inputBox-outer">
      <input class="inputArea" v-model="model" :placeholder="placeholder" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.inputBox {
  position: relative;
  width: 10vw;
  left: 1vw;
  display: flex;
  // background-color: #d55e5e;
  border-style: none solid solid none;
  border-radius: 8px;
  border-color: #E8E8E8;
}

.inputBox-outer {
  position: relative;
}

.inputArea {
  position: relative;
  width: 9.5vw;
  height: 3vh;
  left: 0.5vw;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-style: none;
  font-size: 1rem;
  // background-color: #b94d4d;

  &:focus {
    outline: none;
  }
}
</style>
